<template>
  <el-container class="mainContent">
    <el-row>
      <el-col class="title">修改家庭医生信息</el-col>
    </el-row>
    <el-form ref="form" :model="form" label-width="150px">
      <el-form-item label="家庭医生姓名：">
        <el-input v-model="form.d_name"></el-input>
      </el-form-item>
      <el-form-item label="家庭医生头像：">
        <el-image style="width: 200px; height: 200px" :src="url" fit="cover"></el-image>
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="form.d_sex" placeholder="请选性别">
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="身份证号：">
        <el-input v-model="form.d_sid"></el-input>
      </el-form-item>
      <el-form-item label="职称：">
        <el-select v-model="form.d_join" placeholder="请选择职称">
          <el-option label="主治医师" value="主治医师"></el-option>
          <el-option label="副主治医师" value="副主治医师"></el-option>
          <el-option label="医师" value="医师"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="擅长">
        <el-input v-model="d_feature" :disabled="true" el-col="2"></el-input>
        <el-select v-model="feature" placeholder="请选择职称">
          <el-option label="儿科" value="儿科"></el-option>
          <el-option label="内科" value="内科"></el-option>
          <el-option label="外科" value="外科"></el-option>
          <el-option label="妇科" value="妇科"></el-option>
          <el-option label="肿瘤科" value="肿瘤科"></el-option>
          <el-option label="精神科" value="精神科"></el-option>
        </el-select>
        <el-button @click="addFeature">添加</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="back">返回</el-button>
      </el-form-item>
    </el-form>
  </el-container>
</template>
<script>
export default {
  name: "EditDoctor",
  data() {
    return {
      form: {},
      d_id: 0,
      baseUrl: "http://127.0.0.1:8001/",
      url: "",
      d_feature: "",
      feature: "",
    };
  },
  methods: {
    getData() {
      this.axios({
        url: "/getDoctorData",
        method: "post",
        data: { d_id: Number(this.d_id) },
      })
        .then((res) => {
          console.log(res);
          if (res.data.code === 200) {
            this.form = res.data.data;
            this.url = this.baseUrl + res.data.data.d_imgUrl;
            for (let i = 0; i < res.data.data.d_feature.length; i++) {
              this.d_feature += `${res.data.data.d_feature[i]} `;
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    addFeature() {
      if (this.d_feature.indexOf(this.feature) < 0) {
        this.d_feature += ` ${this.feature}`;
      } else {
        this.$message.error("该科目已存在，请重新选择");
      }
    },
    onSubmit() {
      console.log(this.form);
      // this.form.d_feature
      let temp = this.d_feature.split(" ");
      for (let i = 0; i < temp.length; i++) {
        if (temp[i] == "") {
          temp.splice(i, 1);
        }
      }
      this.form.d_feature = temp;
        this.$confirm("确定修改此医生信息？, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.axios({
               url: "/editDoctorData",
              method: "post",
              data: this.form,
            })
              .then((res) => {
                if (res.data.code === 200) {
                  this.$router.push("/home/doctor");
                  this.$message({
                    message: "修改成功",
                    type: "success",
                  });
                } else {
                  this.$message.error("修改失败");
                }
              })
              .catch((err) => {
                this.$message.error("修改失败");
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消修改",
            });
          });
    },
    back() {
      this.$router.go(-1);
    },
  },
  mounted() {
    this.d_id = sessionStorage.getItem("d_id");
    this.getData();
  },
};
</script>
<style lang="less" scoped>
.mainContent {
  width: 100%;
  flex-direction: column;
  text-align: left;
}

.pagination {
  margin-top: 50px;
  text-align: center;
}
.title {
  margin-bottom: 30px;
  font-size: 20px;
  font-weight: 600;
}
.subtitle {
  margin: 30px 0;
  font-size: 16px;
  font-weight: 600;
}
</style>